<template>
  <div>
    <el-card class="box-card">
      <!-- 头部 -->
      <div class="content_top">
        <div style="width: 100%;height: 50px;line-height: 50px;border-bottom: 1px solid #E9E9E9;">
          <h3 style="margin-left: 30px;font-size: 20px;font-weight: 700;">住户管理</h3>
        </div>
        <div style="width: 100%;height: 200px;">
          <div style="width: 100%;height: 50px;line-height: 50px;font-size: 14px;margin-top: 10px;">
            <span style="margin-right: 10px;margin-left: 30px;">住户类型</span>
            <el-select v-model="householdType" style="width: 200px;" placeholder="请选择住户类型">
              <el-option
                v-for="item in holdType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span style="margin-right: 10px;margin-left: 100px;">住户状态</span>
            <el-select v-model="start" style="width: 200px;" placeholder="请选择住户状态">
              <el-option
                v-for="item in startType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="width: 100%;height: 50px;line-height: 50px;font-size: 14px;margin-top: 10px;">
            <span style="margin-right: 10px;margin-left: 30px;">提交日期</span>
            <el-date-picker
              v-model="auditTime"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <span :style="style" @click="nowDay">今日</span>
            <span :style="style1" @click="yesterday">昨日</span>
            <span :style="style2" @click="nearSevenDay">最近7天</span>
            <span :style="style3" @click="nearThirtyDay">最近30天</span>
          </div>
          <div style="width: 100%;height: 50px;line-height: 50px;font-size: 14px;margin-top: 10px;">
            <span style="margin-right: 10px;margin-left: 30px;">精准查询</span>
            <el-select v-model="type" style="width: 200px;" placeholder="请选择查询类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input v-model="input" style="width: 250px;margin-left: 20px;" placeholder="请输入"></el-input>
            <el-button style="margin-left: 100px;height: 30px;" type="primary" @click="queryHouseHold">查询</el-button>
            <el-button style="margin-left: 20px;height: 30px;" @click="cleanHouseHold">重置</el-button>
          </div>
        </div>
      </div>
      <!-- 住户列表 -->
      <div class="content">
        <div style="width: 100%;height: 50px;overflow: hidden;margin-top: 10px;">
          <p style="margin: 15px 0 0 40px;float: left;">住户列表</p>
          <el-button style="float: right;height: 35px;margin-top: 8px;margin-right: 2%;" @click="batchDel">批量操作</el-button>
          <el-button type="primary" @click="dumpAdd" style="float: right;height: 35px;margin-top: 8px;margin-right: 20px;" icon="el-icon-plus">新增</el-button>
        </div>
        <div style="width: 100%;height: 500px;margin-top: 10px;">
          <div class="left">
            <div style="width: 100%;height: 50px;background: #F9F9F9;line-height: 50px;">
              <span style="margin-left: 20px;">南航碧桂圆小区</span>
            </div>
            <el-tree
              class="tree"
              :data="data"
              :props="defaultProps"
              accordion
              @node-click="handleNodeClick">
            </el-tree>
          </div>
          <div class="right">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                prop="id"
                label="序号"
                width="80">
              </el-table-column>
              <el-table-column
                prop="hname"
                label="姓名"
                width="90">
              </el-table-column>
              <el-table-column
                prop="householdType"
                label="类型"
                width="80">
              </el-table-column>
              <el-table-column
                prop="start"
                label="状态"
                width="90">
                <template slot-scope="scope">
                 <p style="color: red;">{{scope.row.start == 0?'审核中':(scope.row.start == 1?'已认证':'认证失败')}}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="documentNumber"
                label="证件号码"
                width="180">
              </el-table-column>
              <el-table-column
                prop="hphone"
                label="手机号"
                width="120">
              </el-table-column>
              <el-table-column
                prop="house"
                label="房间"
                width="120">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button @click="examine(scope.row)" type="text" size="small">审核</el-button>
                  <el-button @click="dumpUpdate(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small" @click="delHouseHold(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SmartPropertyVueWorkbench',

  data() {
    return {
      data: [],
      householdType: '',
      house: '',
      start: '',
      style: 'margin-left: 20px;',
      style1: 'margin-left: 20px;',
      style2: 'margin-left: 20px;',
      style3: 'margin-left: 20px;',
      auditTime: '',
      type: '',
      input: '',
      holdType: [{
        value: null,
        label: '全部'
      },{
        value: '业主',
        label: '业主'
      }, {
        value: '亲属',
        label: '亲属'
      }, {
        value: '朋友',
        label: '朋友'
      }, {
        value: '租户',
        label: '租户'
      }, {
        value: '其他',
        label: '其他'
      }],
      options: [{
        value: 'name',
        label: '住户姓名'
      },{
        value: 'phone',
        label: '手机号码'
      }, {
        value: 'number',
        label: '证件号码'
      }],
      startType: [{
        value: null,
        label: '全部'
      },{
        value: '0',
        label: '审核中'
      }, {
        value: '1',
        label: '已认证'
      }, {
        value: '2',
        label: '认证失败'
      }],
      defaultProps: {
        children: 'children',
        label: 'building'
      },
      tableData: [],
      total: 0,
      currentPage4: 1,
      pageRequest: { // 分页请求参数
        pageNum: 1, // 当前页
        pageSize: 10 // 每页多少条数据
      },
      multipleSelection: []
    }
  },

  mounted() {
    this.listHouse()
    this.queryHouseHold()
  },

  methods: {
    listHouse(){ // 关联房屋
      this.$axios.get('/memberCjq/household/listHouse',{
        params:{
          cid: window.sessionStorage.getItem('vid')
        }
      }).then(res => {
        this.data = res.data
      })
    },
    //获取对应时间
    getDay(day) {
      //这里的day是时间（列如：7，-7）
      let today = new Date();
      let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码，到这时间已经转行为毫秒
      return this.format(today);
    },
    //格式化日期
    format(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      return `${year}-${month}-${day}`;
    },
    nowDay(){ // 查询今天住户
      this.auditTime = (this.getDay(0) + ' ' + '00:00:00'+','+this.getDay(0) + ' ' + '23:59:59').split(',')
      this.style= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style1= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style2= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style3= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style = 'margin-left: 20px;color: rgb(24, 144, 255)'
      this.queryHouseHold()
    },
    yesterday(){ // 查询昨天的住户
      this.auditTime = (this.getDay(-1) + ' ' + '00:00:00'+','+this.getDay(-1) + ' ' + '23:59:59').split(',')
      this.style= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style1= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style2= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style3= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style1 = 'margin-left: 20px;color: rgb(24, 144, 255)'
      this.queryHouseHold()
    },
    nearSevenDay(){ // 查询近七天的住户
      this.auditTime = (this.getDay(-7) + ' ' + '00:00:00'+','+this.getDay(0) + ' ' + '23:59:59').split(',')
      this.style= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style1= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style2= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style3= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style2 = 'margin-left: 20px;color: rgb(24, 144, 255)'
      this.queryHouseHold()
    },
    nearThirtyDay(){ // 查询近三十天的住户
      this.auditTime = (this.getDay(-30) + ' ' + '00:00:00'+','+this.getDay(0) + ' ' + '23:59:59').split(',')
      this.style= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style1= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style2= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style3= 'margin-left: 20px;color: rgb(0, 0, 0)',
      this.style3 = 'margin-left: 20px;color: rgb(24, 144, 255)'
      this.queryHouseHold()
    },
    queryHouseHold(){ // 住户列表展示
      this.$axios.get('/memberCjq/household/queryHouseHold',{
        params: {
          householdType: this.householdType,
          start: this.start,
          villageId: window.sessionStorage.getItem('vid'),
          pageSize: this.pageRequest.pageSize,
          startTime: this.auditTime[0],
          endTime: this.auditTime[1],
          house: this.house,
          type: this.type,
          input: this.input,
          pageNum: this.pageRequest.pageNum
        }
      }).then(res => {
        if (res.status === 200){
          this.tableData = res.data.obj.content
          this.total = res.data.obj.total
        }
      })
    },
    dumpAdd(){
      this.$router.push('/householdAdd')
    },
    dumpUpdate(obj){
      this.$router.push({path:'/householdUpdate', query: {examine: obj}})
    },
    examine(obj){
      this.$router.push({path:'/examine', query: {examine: obj}})
    },
    delHouseHold (obj) { // 删除住户信息
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/memberCjq/household/delHouseHold', {
          params: {
            id: obj.id
          }
        }).then(res => {
          if (res.data.flag) {
            this.insertLog('删除房屋信息')
            this.MyMessage('删除成功!', 'success')
            this.queryHouseHold()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    batchDel () { // 批量删除住户信息
      const ids = []
      this.multipleSelection.forEach(item => {
        ids.push(item.id)
      })
      this.$axios.put('/memberCjq/household/batchDel/'+ids).then(res => {
        if (res.data.flag) {
          this.MyMessage('批量删除成功!', 'success')
          this.queryHouseHold()
        }
      })
    },
    cleanHouseHold(){
      this.householdType = ''
      this.start = ''
      this.auditTime = ''
      this.type = ''
      this.input = ''
      this.style= 'margin-left: 20px;color: rgb(0, 0, 0)'
      this.style1= 'margin-left: 20px;color: rgb(0, 0, 0)'
      this.style2= 'margin-left: 20px;color: rgb(0, 0, 0)'
      this.style3= 'margin-left: 20px;color: rgb(0, 0, 0)'
      this.queryHouseHold()
    },
    handleSelectionChange (val) { // 获取选中id
      this.multipleSelection = val
    },
    handleNodeClick(data) {
      this.house = data.building
      this.queryHouseHold()
    },
    handleSizeChange(val) {
      this.pageRequest.pageSize = val
      console.log(`每页 ${val} 条`)
      this.queryHouseHold()
    },
    handleCurrentChange(val) {
      this.pageRequest.pageNum = val
      console.log(`当前页: ${val}`)
      this.queryHouseHold()
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.box-card{
  height: 1000px;
  margin: 10px;
  font-family: '微软雅黑';
}
.content_top{
  width: 100%;
  height: 250px;
  overflow: hidden;
  border: 1px solid #E9E9E9;
}
::v-deep(.el-input__inner){
  height: 30px;
}
::v-deep(.el-date-editor .el-range-separator){
  line-height: 22px;
}
::v-deep(.el-button){
  line-height: 0;
}
.content{
  width: 100%;
  height: 650px;
  border: 1px solid #E9E9E9;
  margin-top: 20px;
}
.left{
  width: 20%;
  height: 90%;
  margin-left: 30px;
  float: left;
}
.right{
  width: 74%;
  height: 90%;
  margin-left: 20px;
  float: left;
}
.tree{
  width: 90%;
  margin-left: 10px;
}
</style>